<template>
    <div>
        <pagetitle :type="type" v-if="pageTitle"></pagetitle>
        <el-card class="box-card">
            <div class="teamTopTip">
                <el-icon color="#252B3A" size="16px" v-if="icon"><Warning /></el-icon>
                <div class="tipbox">
                    <div class="tiptitle">温馨提示</div>
                    <div class="tipitem">1、“{{ title }}”包括您的原始资源及服务、购买的资源及服务。</div>
                    <div class="tipitem">
                        2、如需查看您使用资源产生的费用信息，请前往“
                        <el-button type="primary" link @click="topages('/expense/shoppingtrolley')">费用中心</el-button>
                        ”查看。
                    </div>
                    <div class="tipitem">3、新增，更新，删除资源有一定时间的数据延迟，请稍候查看。</div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
interface Props {
    type?: string;
    icon?: boolean;
    pageTitle?: boolean;
    title?: string;
}
const props = withDefaults(defineProps<Props>(), {
    // 默认2
    type: "2",
    icon: true,
    pageTitle: true,
    title: "资源管理",
});
const topages = (url: string) => {
    router.push(url);
};
</script>
<style lang="scss" scoped>
.teamTopTip {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .tipbox {
        margin-left: 10px;
        .tiptitle {
            font-size: 14px;
            font-weight: bold;
            color: #252b3a;
        }
        .tipitem {
            margin-top: 10px;
            font-size: 14px;
            color: #252b3a;
            button {
                margin-top: -4px;
            }
        }
    }
}
</style>
